<template>
  <view class="login-container">
    <view class="logo-box">
      <image src="/static/images/logo.png" class="logo" mode="widthFix"></image>
      <text class="title">铁塔财务部智能化报销管控平台</text>
    </view>
    
    <view class="form-box">
      <u-tabs :list="tabsList" :current="current" @change="tabsChange"></u-tabs>
      
      <!-- 微信登录 -->
      <view class="login-form" v-if="current === 0">
        <view class="tips">点击下方按钮，使用微信账号快速登录</view>
        <view class="btn-group">
          <button class="wx-login-btn" open-type="getUserInfo" @getuserinfo="wxLogin">
            <u-icon name="weixin-fill" color="#ffffff" size="20"></u-icon>
            <text>微信登录</text>
          </button>
        </view>
      </view>
      
      <!-- 手机号登录 -->
      <view class="login-form" v-if="current === 1">
        <u-form :model="phoneForm" ref="phoneFormRef">
          <u-form-item label="+86" label-width="60">
            <u-input v-model="phoneForm.phone" placeholder="请输入手机号" maxlength="11" />
          </u-form-item>
          <u-form-item label="验证码" label-width="60">
            <u-input v-model="phoneForm.code" placeholder="请输入验证码" maxlength="6" />
            <u-button slot="right" type="primary" size="mini" @click="getCode" :disabled="codeBtnDisabled">
              {{ codeText }}
            </u-button>
          </u-form-item>
        </u-form>
        <view class="btn-group">
          <u-button type="primary" block @click="phoneLoginSubmit" :loading="loading">登录</u-button>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <text>登录即表示同意</text>
      <text class="link">《用户协议》</text>
      <text>和</text>
      <text class="link">《隐私政策》</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabsList: [
        { name: '微信登录' },
        { name: '手机号登录' }
      ],
      phoneForm: {
        phone: '',
        code: ''
      },
      loading: false,
      codeText: '获取验证码',
      codeBtnDisabled: false,
      timer: null
    }
  },
  onLoad() {
    // 检查是否已登录
    const token = uni.getStorageSync('token')
    if (token) {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  },
  methods: {
    // 切换登录方式
    tabsChange(index) {
      this.current = index
    },
    
    // 微信登录
    wxLogin(e) {
      if (e.detail.errMsg !== 'getUserInfo:ok') {
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      // 获取code
      uni.login({
        provider: 'weixin',
        success: async (res) => {
          try {
            await this.$store.dispatch('user/wxLogin', res.code)
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 1500)
          } catch (error) {
            uni.showToast({
              title: error || '登录失败，请重试',
              icon: 'none'
            })
          } finally {
            this.loading = false
          }
        },
        fail: () => {
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          })
          this.loading = false
        }
      })
    },
    
    // 获取手机验证码
    getCode() {
      if (!this.phoneForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phoneForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      this.codeBtnDisabled = true
      let seconds = 60
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码发送成功',
        icon: 'success'
      })
      
      // 倒计时
      this.timer = setInterval(() => {
        seconds--
        this.codeText = `${seconds}秒后重新获取`
        
        if (seconds <= 0) {
          clearInterval(this.timer)
          this.codeText = '获取验证码'
          this.codeBtnDisabled = false
        }
      }, 1000)
      
      // 实际项目中应该是这样的API调用
      // try {
      //   await this.$http.post('/user/send-code', { phone: this.phoneForm.phone })
      //   uni.showToast({
      //     title: '验证码发送成功',
      //     icon: 'success'
      //   })
      // } catch (error) {
      //   uni.showToast({
      //     title: error || '发送失败，请重试',
      //     icon: 'none'
      //   })
      //   this.codeBtnDisabled = false
      //   clearInterval(this.timer)
      // }
    },
    
    // 手机号登录提交
    async phoneLoginSubmit() {
      if (!this.phoneForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phoneForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.phoneForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      try {
        await this.$store.dispatch('user/phoneLogin', this.phoneForm)
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: error || '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  },
  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
}

.logo-box {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .logo {
    width: 200rpx;
    height: 200rpx;
  }
  
  .title {
    margin-top: 30rpx;
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
  }
}

.form-box {
  width: 100%;
  margin-top: 80rpx;
}

.login-form {
  margin-top: 40rpx;
  
  .tips {
    text-align: center;
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 40rpx;
  }
}

.btn-group {
  margin-top: 60rpx;
  
  .wx-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #07c160;
    color: #ffffff;
    border-radius: 10rpx;
    font-size: 32rpx;
    height: 90rpx;
    line-height: 90rpx;
    
    text {
      margin-left: 10rpx;
    }
  }
}

.footer {
  position: fixed;
  bottom: 60rpx;
  font-size: 24rpx;
  color: #999999;
  
  .link {
    color: #1890ff;
  }
}
</style> 